<template>
  <div>
    <Header1>{{ itemObj.nm }}</Header1>
    <Header2></Header2>
    <div class="item-con">
      内容页
      {{ itemObj.nm }}
      <img :src="itemObj.img" />
      {{ id }}
    </div>

    <!-- 显示 日期的数据 -->
    <van-tabs @click="getData" :swipe-threshold="num">
      <van-tab
        v-for="(item, index) in dateArr"
        :key="index"
        :title="item.date | format"
      >
      </van-tab>
    </van-tabs>
    <div class="item-title"></div>

    <!-- 显示 当天的影院列表 -->
    <div v-for="(item, index) in cinemaArr" :key="index" class="c_item">
      <div class="c_title">{{ item.nm }}</div>
      <div class="c_addr">{{ item.addr }}</div>
    </div>
  </div>
</template>

<script>
import Header1 from "@/components/common/Header1";
import Header2 from "@/components/common/Header2";

import axios from "axios";
export default {
  name: "Item",
  data: function () {
    return {
      id: 0,
      itemObj: {}, //内容页返回的数据是对象
      cinemaArr: [], //影院信息
      dateArr: [], //保存日期的数据
      num: 3, //如果tab的个数大于3 都是可以滚动的
    };
  },
  mounted() {
    //获取到从列表页传过来的参数
    console.log(this.$route);
    this.id = this.$route.params.id;
    //获取内容页的数据
    axios.get("json/" + this.id + ".json").then((res) => {
      console.log(res);
      var data = res.data.data.movie;
      data.img = data.img.replace("w.h", "148.208");
      this.itemObj = data;
    });

    //获取日期数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=1356063&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        //获取影院数据
        this.getCinemaArr(this.dateArr[0].date);
      });
  },
  components: {
    Header1,
    Header2,
  },
  methods: {
    //date 某一天的字符串
    getCinemaArr: function (date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=1356063&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          console.log(res);
          this.cinemaArr = res.data.data.cinemas;
        });
    },
    getData: function (name, title) {
      console.log(name, title); //使用title 可以接收到  日期的数据

      //再一次获取数据
      this.getCinemaArr(this.dateArr[name].date);
    },
  },

  //日期时间的过滤器,将年月日转为  周几，前三天需要写成是 今天  明天  后天
  filters: {
    format(value) {
      //console.log(value);
      var arr = value.split("-");
      //console.log(arr);
      var str = ""; //输出的 带 今天明天后天的字符串
      var jintian = ["今天", "明天", "后天"];
      //将 传过来的日期转为 date的格式
      var d1 = new Date(value);
      //获取当前时间的年月日
      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var d2 = new Date(y + "-" + m + "-" + d);
      //求今天明天后天
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24);
      // console.log(iday);

      //判断 是不是  今天明天后天，如果不是，按周几来显示
      if (jintian[iday] != undefined) {
        str = jintian[iday];
      } else {
        //显示周几
        str = `周${"日一二三四五六".charAt(d1.getDay())}`;
      }
      //console.log(str);
      return (str += `${arr[1]}月${arr[2]}日`);
    },
  },
};
</script>

<style >
.item-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.van-tabs__line {
  position: absolute;
  bottom: 15px;
  left: 0;
  z-index: 1;
  width: 70px;
  height: 3px;
  background-color: #ee0a24;
  border-radius: 3px;
}
.c_item {
  height: 80px;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.c_title {
  font-size: 18px;
  font-weight: bold;
}
</style>